<template>
  <div class="home-page">
    <p>test</p>
    <canvas id="pag" class="canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(async () => {
  // 动态导入 libpag
  const { PAGInit } = await import('libpag');
  
  try {
    const PAG = await PAGInit({
      locateFile: (file) => {
        if (file.endsWith('.wasm')) {
          // 指向 public 目录下的 libpag.wasm 文件
          return '/libpag.wasm';
        }
        return file;
      }
    });
    const url = '/test1.pag';
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File([blob], url.replace(/(.*\/)*([^.]+)/i, '$2'));
        const pagFile = await PAG.PAGFile.load(file);
        const canvas = document.getElementById('pag') as HTMLCanvasElement;
        canvas.width = pagFile.width();
        canvas.height = pagFile.height();
        const pagView = await PAG.PAGView.init(pagFile, '#pag');
        pagView.setRepeatCount(0);
        await pagView.play();
      });
  } catch (error) {
    console.error('PAGInit failed:', error);
  }
});
</script>

<style scoped>
.home-page {
  padding: 2rem;
  text-align: center;
}

p {
  font-size: 1.2rem;
  color: #666;
}

#pag {
  outline: 1px solid red;
}
</style>